<script lang="ts" setup>
import { ref } from 'vue'
import http from '@/http'
import { useI18n } from '@/hooks/web/useI18n'
import BoxView2 from '@/components/BoxView2.vue'
import { useRoute } from 'vue-router'
import BgVue4 from '@/components/BgVue4.vue'
const route = useRoute()

const { t } = useI18n()
type ItemType = {
  time: string
  value: number
  note: string
  type: number
}
const list = ref<ItemType[]>([])
const coin = route.query.coin

async function init() {
  const res = await http.get('/api/user/moneyLog')
  if (res.code === 200) {
    // this.gm = res.data.gm
    // this.at = res.data.at
    list.value = res.data.logs
      .map((row: any) => {
        var value = coin === 'PT' ? row.gm : row.at
        if (value * 1 === 0) {
          return null
        }
        return {
          time: row.create_time,
          value: (value > 0 ? '+' : '') + value,
          note: row.note,
          type: 2,
        }
      })
      .filter((row: any) => row !== null)

    if (process.env.NODE_ENV !== 'production') {
      list.value = [
        {
          time: '20220202',
          value: 123,
          note: 'xxxx',
          type: 2,
        },
        {
          time: '20220202',
          value: 123,
          note: 'xxxx',
          type: 2,
        },
      ]
    }
  }
}

init()
</script>
<template>
  <BgVue4 class="FundingDetails">
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <div class="title-style tit">{{ t('walletGm.ZJMX') }}</div>
    <div class="list-block">
      <BoxView2 v-for="(item, index) in list" :key="index">
        <div class="item-wrap">
          <div class="item">
            <div class="name">{{ item.note }}</div>
            <div class="v">{{ item.value }}</div>
          </div>
          <div class="date">
            {{ item.time }}
          </div>
        </div>
      </BoxView2>
    </div>
  </BgVue4>
</template>

<style lang="less" scoped>
.FundingDetails {
  color: #fff;

  font-size: 12px;

  .tit {
    padding: 10px 0;
    font-size: 22px;
    text-align: center;
  }

  .item-wrap {
    padding: 0 15px;
    font-size: 13px;
  }
  .item {
    display: flex;
    justify-content: space-between;
    // background-color: hsla(47, 90%, 48%, 0.08);
    // border-radius: 10px;
    // padding: 10px 0;
    padding: 6px 0;
  }

  .date {
    padding-top: 2px;
    padding-bottom: 10px;
  }

  .v {
    color: #f7cc40;
  }
}
</style>
